<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        #box{
            width: 600px;
            margin: 0 auto;
            color: #333;
        }
        fieldset{
            border-color: #40acc8;
        }
        .com{
            width: 220px;
            height: 25px;
            line-height: 25px;
        }
        .btn{
            width: 120px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            background-color: #39afca;
            color: #fff;
            border: none;
            outline: none;
            font-size: 18px;
            border-radius: 5px;
        }
        .msg{
            color: red;
            margin-left: 5px;
        }
        table{
            border-collapse:collapse; 
            border-spacing:0px;  
            width: 600px;
            height: 250px;
            border: 2px solid #40acc8;
            box-sizing: border-box;
            margin-top: 20px;
        }
        thead>tr{
            color: #fff;
            width: 600px;
            height: 40px;
            line-height: 40px;
            background-color: #40acc8;
            font-size: 18px;
        }
        thead>tr td{
            width: 20%;
        }
        thead>tr td:first-child{
           padding-left: 20px;
        }
 
        tbody>tr td:first-child{
            padding-left: 20px;
            
        }
        .sex{
            padding-left: 20px;
        }
        tbody>tr .tel{
            padding-right: 50px;
            text-align: center;
            width: 50px;
        }
        tbody button{
            width: 60px;
            height: 35px;
            line-height: 35px;
            color: #fff;
            background-color: #39afca;
            border: none;
            outline: none;
            font-size: 16px;
            border-radius: 5px;
        }
        tbody>tr:nth-of-type(2n){
            background-color: #ebebeb;
        }
    </style>
</head>
<body>
    <div id="box">
        <fieldset>
          <legend>学生信息录入系统</legend>
         <p>姓名 : <input class="com" type="text" placeholder="use" v-model="newArr.name" @blur="istrue()"><span v-show="bol" class="msg">{{msg}}</span></p>
         <p>年龄 : <input class="com" type="text" placeholder="请输入年龄" v-model="newArr.age"/></p>
         <p>性别 :
             <select name="sex"  v-model="newArr.sex">
                <option value="男" checked>男</option>
                <option value="女">女</option>
            </select>
        </p>
        <p>手机 : <input class="com" type="text" placeholder="请输入手机号码"  v-model="newArr.tel"></p>
        <p><button @click="add()" class="btn">创建新用户</button></p>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td class="sex">性别</td>
                    <td>年龄</td>
                    <td>手机</td>
                    <td>删除</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in arr" :key="index">
                    <!-- <td>{{newArr.newName}}</td> -->
                    <td>{{item.name}}</td>
                    <td class="sex">{{item.sex}}</td>
                    <td>{{item.age}}</td>
                    <td class="tel">{{item.tel}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
      </div>
      <script>
          var vm=new Vue({
              el:"#box",
              data:{
                  arr:[
                      {name:"方君昊",sex:"男",age:"20",tel:"15473124380"},
                      {name:"乔向雁",sex:"女",age:"22",tel:"15373124380"},
                      {name:"鲁傲柔",sex:"男",age:"23",tel:"15273124380"},
                      {name:"寸琴韵",sex:"女",age:"21",tel:"15173124380"}
                  ],
                  newArr:{name:'',sex:'男',age:'',tel:''},
                msg:"",
                bol:"false"   
              },methods: {
                istrue(){
                    //alert(1)
                    var reg = /^[\u4e00-\u9fa5\w]{4,16}$/;
                     if(!reg.test(this.newArr.name)){
                        this.msg="4-16位(字母，数字，下划线)"
                        this.bol=true;
                        return;
                     }else{
                         this.msg=''
                         this.bol=false;
                     }
                },
                  add(){
                     if(this.newArr.name===''){
                         alert("学生姓名不能为空哦");
                         return;  //一旦姓名为空，不再执行创建用户的操作
                     }
                     if(this.newArr.age<=0){
                        alert('请输入正确的年龄');
                           return;
                     }
                     if(this.newArr.tel===''){
                         alert("请输入正确的手机号码");
                         return;
                     }
                    this.arr.unshift(this.newArr); 
                     this.newArr={name:'',sex:'女',age:'1',tel:''}; 
                  },
                  del(index){
                    this.arr.splice(index,1)
                  }
              }
          })

      </script>
</body>
</html>